import React from 'react';
import PropTypes from 'prop-types';
import cn from 'classnames';
import { gql, useQuery } from '@apollo/client';

import Button from '@kuiper-components/button';
import Table from '@kuiper-components/page-table';
import Select, { Option } from '@kuiper-components/select';

import HostSearchInput from '../../../../components/HostSearchInput';
import CopyBoard from '../../../../components/CopyBoard';

import { datetime } from '../../../../../common/formatter';
import {
	LEVEL_NUM_LABEL_MAP,
	WARNING_CATEGORY_KEY_LABEL_MAP,
} from '../../../../../common/constants';
import s from './DetailTable.module.css';
import Box from '../Box';

export default function DetailTable({ className, taskId, stats }) {
	const [filter, setFilter] = React.useState({});
	const [tableData, setTableData] = React.useState([]);
	const [allData, setAllData] = React.useState([]);
	const handleFilterChange = custom => {
		setFilter({ ...filter, ...custom });
	};
	React.useEffect(() => {
		if (!Object.values(filter).some(e => e)) {
			init();
			return;
		}
		const tableData_ = allData?.reduce((arr, x) => {
			if (
				filter.affects &&
				x.affects.toLowerCase().indexOf(filter.affects.toLowerCase()) < 0
			) {
				return arr;
			}
			if (filter.category && x.title !== filter.category) {
				return arr;
			}
			if (Number.isInteger(filter.level) && x.level !== filter.level) {
				return arr;
			}
			if (filter.status) {
				if (filter.status === 'unresolve' && (x.isResolved || x.ignoredTime)) {
					return arr;
				} else if (
					filter.status === 'resolved' &&
					(!x.isResolved || x.ignoredTime)
				) {
					return arr;
				} else if (
					filter.status === 'ignored' &&
					!(x.ignoredTime && !x.isResolved)
				) {
					return arr;
				}
			}
			arr.push({
				...x,
				endTime,
			});
			return arr;
		}, []);
		setTableData(tableData_);
	}, [filter]);
	const data = stats;
	const columns = [
		{
			key: 'endTime',
			title: '时间',
			dataIndex: 'endTime',
			render: x => datetime(x),
		},
		{
			key: 'affects',
			title: '风险地址',
			dataIndex: 'affects',
			render(affects) {
				return <CopyBoard className={s.target} text={affects} />;
			},
		},
		{
			key: 'title',
			title: '威胁名称',
			dataIndex: 'title',
		},
		// {
		// 	key: 'level',
		// 	title: '威胁等级',
		// 	dataIndex: 'level',
		// 	render: x => LEVEL_NUM_LABEL_MAP[x],
		// },
		// {
		// 	key: 'isResolved',
		// 	title: '状态',
		// 	dataIndex: '_id',
		// 	render(_, { isResolved, ignoredTime }) {
		// 		let text = '待修复';
		// 		if (ignoredTime) text = '已忽略';
		// 		else if (isResolved) text = '已修复';
		// 		return text === '待修复' ? (
		// 			<mark data-no-padding data-type="error">
		// 				{text}
		// 			</mark>
		// 		) : (
		// 			text
		// 		);
		// 	},
		// },
	];
	const endTime = data[0]?.endTime;
	data.forEach(item => {});
	const init = () => {
		const tableData_ = stats.reduce((arr, task) => {
			const warnings = task?.result?.warnings || [];
			warnings.forEach(w => {
				arr.push({
					endTime: task?.endTime,
					affects: w?.affects,
					title: w?.title,
					level: w.level,
					isResolved: w.isResolved,
					ignoredTime: w.ignoredTime,
					id: w?._id,
				});
			});
			return arr;
		}, []);
		setAllData(tableData_);
		setTableData(tableData_);
	};
	React.useMemo(() => {
		init();
	}, [stats]);
	return (
		<Box
			title="内容违规详情"
			className={cn(className, s.trend)}
			headerClass={s.header}
		>
			<div>
				<div className={s.toolbox}>
					<HostSearchInput
						placeholder="请输入风险地址"
						type="search"
						className={s.input}
						value={filter.affects}
						onChange={affects => handleFilterChange({ affects })}
					/>
					<div className={s.selectContainer}>
						<Select
							placeholder="请选择威胁名称"
							onChange={category => handleFilterChange({ category })}
							className={s.select}
							allowClear
							value={filter?.category}
						>
							{Object.entries(WARNING_CATEGORY_KEY_LABEL_MAP.content).map(
								([key, label]) => (
									<Option key={key} value={label}>
										{label}
									</Option>
								)
							)}
						</Select>
						<Button
							onClick={() =>
								handleFilterChange({
									category: undefined,
									status: undefined,
									level: undefined,
									affects: undefined,
								})
							}
						>
							重置
						</Button>
					</div>
				</div>
				<Table
					className={cn(s.table, 'tableFormat')}
					type="local"
					columns={columns}
					data={tableData}
				/>
			</div>
		</Box>
	);
}

DetailTable.propTypes = {
	className: PropTypes.string,
	taskId: PropTypes.string,
};

DetailTable.defaultProps = {
	className: s.detailTable,
};
